<template>
<div>
  <el-form ref="form"  label-width="80px" :inline="true">
    <el-form-item label="班级" >
      <el-input
     v-model="className"
        placeholder="请输入班级"
        size="small"
        style="width: 180px"
      />
    </el-form-item>
    <el-form-item label="请假日期">
      <el-date-picker
        v-model="date"
        size="small"
        style="width: 240px"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getList">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="id"
      type="index">
    </el-table-column>
    <el-table-column
      prop="name"
      label="班级">
    </el-table-column>
    <el-table-column
      prop="count"
      label="请假次数">
    </el-table-column>
  </el-table>
  <el-pagination background
                 layout="total, sizes, prev, pager, next, jumper"
                 :current-page="page.pageIndex    "
                 :page-sizes="[5, 10, 20, 30]"
                 :page-size="page.size"
                 :total="page.total"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange">
  </el-pagination>
</div>
</template>

<script>
import {countSd} from "@/api/smartdor/sdcount";
import axios from "axios";

export default {
  name: "index",
  data(){
    return {
      tableData: [],
      className:"",
      date:[],
      page:{
        pageIndex:1,
        size:10,
        total:0
      },
      selectAge:{
        classname:"",
        startDate:"",
        endDate:"",
        pageIndex:0,
        size:0
      },

    }
  },
  methods:{
   async getList(){
      this.selectAge.classname=this.className;
      this.selectAge.startDate=this.date[0];
      this.selectAge.endDate=this.date[1];
      this.selectAge.pageIndex=this.page.pageIndex;
      this.selectAge.size=this.page.size;
      countSd(this.selectAge).then(response=>{
        console.log(response.data)
        this.tableData=response.data;
        this.page.total=response.data[0].total
      })

    },
    handleSizeChange(size){
      this.page.size=size;
      this.page.pageIndex=1;
      this.getList();
    },
    handleCurrentChange(page){
      this.page.pageIndex=page;
      this.getList();
    }
  },
  created() {
    this.getList();
  }
}
</script>

<style scoped>

</style>
